<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动情景2：两列布局</title>
	</head>
	<style>
		/* 外层div */
		div#nav div.nav_left{
			float: left;
			width: 40%;
			height: 47px;
			background: #fff000;
		}
		div#nav div.nav_right{
			float: right;
			width: 40%;
			height: 47px;
			background: #fff000;
		}
	</style>
	<body>
		<h1>浮动情景2：两列布局</h1>
		<!-- 外层div 定义大区域 
		     内层div 定义小区域 微调	
			 加权：div#nav
			       #nav
		-->
		<div id="nav">
			<div class="nav_left">左侧内容</div>
			<div class="nav_right">右侧内容</div>
		</div>
		<div id="nav">
			<div class="nav_left">左侧内容</div>
			<div class="nav_right">右侧内容</div>
		</div>
	</body>
</html>